<template>
    <div>
        <top-bar></top-bar>
        <left-bar  :datas='data'></left-bar>
        <div class="adddrug system">
            <home-bar :currentPage='currentPage'></home-bar>
             <div class="adddrugs system-main">
                 <div class="main-position">
                     首页  >   药品管理  >   已过期药品
                 </div>
                 <div class="main-height"></div>
                 <div class="main-mains">
                  <div class="main-top-nav">
                      <ul>
                          <router-link to="/druglistai/druglist" @click.native="addPath('/druglistai/druglist','药品管理');">
                              <li>药品列表</li>
                          </router-link>
                           <router-link to="/stockmanagement" @click.native="addPath('/stockmanagement','药品管理');">
                              <li>进货管理</li>
                          </router-link>
                          <router-link to="/druglistai/deleteddrugs" @click.native="addPath('/druglistai/deleteddrugs','药品管理');">
                              <li>已删除药品</li>
                          </router-link>
                          <router-link to="/druglistai/shangjia" @click.native="addPath('/druglistai/shangjia','药品管理');">
                              <li>已上架</li>
                          </router-link>
                          <router-link to="/druglistai/xiajia" @click.native="addPath('/druglistai/xiajia','药品管理');">
                              <li>已下架</li>
                          </router-link>
                          <router-link to="/druglistai/shortageofdrugs" @click.native="addPath('/druglistai/shortageofdrugs','药品管理');">
                              <li>缺货药品</li>
                          </router-link>
                          <router-link to="/druglistai/lackdrug" @click.native="addPath('/druglistai/lackdrug','药品管理');">
                              <li>库存预警</li>
                          </router-link>
                          <router-link to="/willexpire" @click.native="addPath('/willexpire','药品管理');">
                              <li>即将过期药品</li>
                          </router-link>
                          <router-link to="/expired" @click.native="addPath('/expired','药品管理');">
                              <li>已过期药品</li>
                          </router-link>
                          <router-link to="/productcategorymgmt" @click.native="addPath('/productcategorymgmt','药品管理');">
                              <li>产品种类管理</li>
                          </router-link>
                          <router-link to="/brandlibrary" @click.native="addPath('/brandlibrary','药品管理');">
                              <li class="active">品牌库</li>
                          </router-link>
                      </ul>
                  </div>
                  <div class="drugListMain">
                      <div class="headOperation">
                          <a href="javascript:void(0);" class="OperationA-application" @click="clickAddBrand">申请添加品牌</a>
                       </div>  <!--/.headOperation -->
                       <div class="drugListTable">
                      <table>
                             <tr>
                               <td>序号</td>
                               <td>品牌名称</td>
                               <td>品牌图片</td>
                               <td>品牌描述</td>
                               <td>药品数量</td>
                             </tr>
                             <tr v-for="(trading,index) in tableList" :key="index">
                               <td width="100">{{index + 1}}</td>
                               <td>{{trading.one}}</td>
                               <td>{{trading.two}}</td>
                               <td>{{trading.three}}</td>
                               <td>{{trading.four}}</td>
                             </tr>
                      </table>
                      </div>
                       <div class="pageBotom">
                            <div class="pageBotomRight">
                                <el-pagination
                                        @size-change="handleSizeChange"
                                        @current-change="handleCurrentChange"
                                        :current-page="currentPage4"
                                        :page-sizes="[100, 200, 300, 400]"
                                        :page-size="100"
                                        layout="total, sizes, prev, pager, next, jumper"
                                        :total="400">
                                </el-pagination>
                            </div>
                        </div>
                  </div>
                 </div>
             </div>
             <!-- 弹窗开始 -->
            <div class="system-menban" v-show="showSystemPopup"></div>
            <div class="systemPopup" v-show="showSystemPopup">
                <div class="topTitle">
                    <span>{{systemPopupTitle}}</span>
                    <i class="el-icon-close system-icon" @click="hideSystemPopup"></i>
                </div>
                <!-- 添加品牌弹窗 -->
                <div class="addBrandPopup clear" v-show="showAddBrandPopup">
                    <div class="clear">
                        <div class="contentOne">
                            <div class="clear">
                                <span>品牌名称</span>
                                <el-input v-model="AddBrandList.brandNameValue" placeholder="请输入内容"></el-input>
                            </div>
                            <div class="clear">
                                <span>品牌简述</span>
                                <el-input type="textarea" v-model="AddBrandList.brandDescValue" placeholder="请输入内容"></el-input>
                            </div>
                            <div class="clear">
                                <span>公司网址</span>
                                <el-input v-model="AddBrandList.webSiteValue" placeholder="请输入内容"></el-input>
                            </div>
                        </div>
                        <div class="contentTwo">
                            <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                                <img v-if="AddBrandList.imageUrl" :src="AddBrandList.imageUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                            <h3>品牌图片</h3>
                            <div>请上传200*200分辨率的图片，支持png,jpeg格式</div>
                        </div>
                    </div>
                    <div class="system-messagebox1-btn clear">
                        <div @click="determineAddBrand">添加</div>
                        <div @click="hideSystemPopup">取消</div>
                    </div>
                </div>
                <!-- 添加品牌成功弹窗 -->
                <div class="okPopup" v-show="showAddBrandOkPopup">
                    <i class="iconfont icon-ok"></i>
                    <h3>添加成功</h3>
                    <div class="system-messagebox1-btn clear">
                        <div @click="hideSystemPopup">确定</div>
                    </div>
                </div>
            </div>
            <!-- 弹窗结束 -->
        </div>
    </div>
</template>

<script>
import topBar from "../../public/top";
import leftBar from "../../public/left";
import homeBar from "../../public/homebar";

export default {
  components: {
    leftBar,
    topBar,
    homeBar
  },
  data() {
    return {
      data: "drugManagment",
      currentPage: { path: "/brandlibrary", name: "药品管理" },
      tableList: [
        {
          id: "1",
          one: "鹿迪",
          two: "img",
          three: "鹿迪鹿迪鹿迪鹿迪",
          four: "2000"
        },
        {
          id: "2",
          one: "鹿迪",
          two: "img",
          three: "鹿迪鹿迪鹿迪鹿迪",
          four: "2000"
        }
      ],
      currentPage4: 1,
      showSystemPopup: false,
      showAddBrandPopup: false,
      systemPopupTitle: "",
      AddBrandList: {
        brandNameValue: "",
        brandDescValue: "",
        webSiteValue: "",
        imageUrl: ""
      },
      showAddBrandOkPopup: false
    };
  },
  mounted() {},
  methods: {
    //点击添加品牌
    clickAddBrand() {
      this.showSystemPopup = true;
      this.showAddBrandPopup = true;
      this.systemPopupTitle = "添加品牌";
    },
    //点击弹窗中的添加
    determineAddBrand() {
      this.showAddBrandPopup = false;
      this.showAddBrandOkPopup = true;
      this.systemPopupTitle = "添加成功";
    },
    //关闭弹窗
    hideSystemPopup() {
      this.showSystemPopup = false;
      this.showAddBrandPopup = false;
      this.showAddBrandOkPopup = false;
      this.systemPopupTitle = "";
      for (var key in this.AddBrandList) {
        this.AddBrandList[key] = "";
      }
    },
    //品牌图片
    handleAvatarSuccess(res, file) {
      this.AddBrandList.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    addPath(n1, n2) {
      //点击切换home-bar
      var obj = {};
      obj.n1 = n1;
      obj.n2 = n2;
      this.$store.commit("addPath", obj);
    }
  }
};
</script>
<style lang="less">
@import "../css/drugList.less";
</style>
